<template>
  <div class="w-full p-1" style="height: 100%">
    <el-table
      class="custom-table"
      :data="props.tableData"
      stripe
      fit
      style="height: calc(100% - 0px); overflow: auto"
    >
      <el-table-column
        v-for="(item, index) in props.tableColumns"
        :key="index"
        show-overflow-tooltip
        :prop="item.field"
        :label="item.name"
        :min-width="item.width"
        :formatter="colFormatter"
      />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
const props = defineProps({
  tableData: Array,
  tableColumns: Array
});
const colFormatter = (row, column) => {
  return row[column.property];
};
</script>
<style scoped lang="scss">
.el-table {
  --el-table-fixed-box-shadow: tranparent;
  --el-table-bg-color: tranparent;
  --el-table-tr-bg-color: tranparent;
  --el-table-expanded-cell-bg-color: tranparent;
  --el-table-header-bg-color: rgba(64, 195, 200, 0.9);
  --el-table-header-text-color: rgba(255, 255, 255, 1);
  --el-fill-color-lighter: rgba(64, 195, 200, 0.3);
  font-size: 18px;
  color: #ffffff;
}
</style>
